import React, { useEffect, useState, useMemo } from 'react'
import { useParams } from 'react-router-dom'
import { Ellipsis, Popup, Input } from 'antd-mobile'
import { getNewsDetail, newsLike, getCommentsList, commentLike, pressComment } from './api/newsService'
import Page from './Page'

export default function NewsDetail() {
    // 页面跳转传入的新闻id
    const { id }: any = useParams()
    // console.log(id);

    // 新闻详情
    const [newsdetail, setNewsDetail] = useState<any>({})
    // 评论列表
    const [commentsList, setCommentsList] = useState<any>([])
    // 评论页数
    const [pageNum, setPageNum] = useState(1)
    // 评论一页显示评论数量
    const [pageSize, setPageSize] = useState(10)
    // 总页数
    const [pages, setPages] = useState(1)
    // 底部弹出层
    const [visible, setVisible] = useState(false)
    // 弹出层信息
    const [mockContent, setMockContent] = useState('')
    // 发表信息
    const [inputComment, setInputComment] = useState('')

    // 获取新闻详细信息
    async function getNewsDetailById() {
        const res = await getNewsDetail(id)
        // console.log(res)
        setNewsDetail(res.data.data)
    }

    // 新闻点赞
    async function giveNewsLike() {
        const res = await newsLike(id)
        // console.log(res);
        if (res.data.code === 200) {
            setNewsDetail({
                ...newsdetail,
                likeNum: newsdetail.likeNum + 1
            })
        }
    }

    // 获取评论列表
    async function getComments(params: any) {
        const res = await getCommentsList(params)
        console.log(res);
        setCommentsList(res.data.rows)
        setPages(Math.ceil(res.data.total / pageSize))
    }

    useEffect(() => {
        getNewsDetailById()
        getComments({
            newsId: id,
            pageNum: 1,
            pageSize: 10
        })
    }, [])

    // 改变分页页码
    async function onChangePage(val: any) {
        getComments({
            newsId: id,
            pageNum: val,
            pageSize: 10
        })
        setPageNum(val)
    }

    // 显示弹出层
    function showTC(item: any) {
        setVisible(true)
        setMockContent(item.content)
    }

    // 评论点赞
    async function giveCommentLike(id: any) {
        const res = await commentLike(id)
        // console.log(res)
        if (res.data.code === 200) {
            setCommentsList(
                commentsList.map((item: any) => {
                    if (item.id === id) item.likeNum++
                    return item
                })
            )
        }
    }

    // 发布评论
    async function sendComment() {
        if (inputComment) {
            const res = await pressComment({
                content: inputComment,
                newsId: id,
            })
            // console.log(res);
            if (res.data.code === 200) {
                setInputComment('')
                getComments({
                    newsId: id,
                    pageNum: pageNum,
                    pageSize: 10
                })
            }
        }
    }

    return (
        newsdetail.content && <div className='news-detail'>
            <h2 className='news-detail-title'>{newsdetail.title}</h2>
            <div className='detail-content' dangerouslySetInnerHTML={{ __html: newsdetail.content.replace(/src="/g, 'src="http://124.93.196.45:10001/') }}></div>
            <div className='news-like' onClick={() => { giveNewsLike() }}>点赞：{newsdetail.likeNum}</div>
            <div className='comments-list'>
                {commentsList &&
                    commentsList.map((item: any) => {
                        return <div className='comment-item' key={item.id}>
                            <div className='comment-head'>用户：{item.userName}</div>
                            <div className='comment-content' onClick={() => { showTC(item) }}>
                                <Ellipsis direction='end' rows={2} content={item.content === null ? '' : item.content} />
                            </div>
                            <div className='comment-num'>
                                <span onClick={() => { giveCommentLike(item.id) }} style={{ color: 'red' }}>点赞数：{item.likeNum}</span>
                                <span>{item.commentDate}</span>
                            </div>
                        </div>
                    })
                }
                <div className='PageIndicator'>
                    <Page onChangePage={onChangePage} pagebtnall={pages} pagebtnnum={5} pagecur={pageNum}></Page>
                </div>
                <Popup className='comment-popup'
                    visible={visible}
                    onMaskClick={() => {
                        setVisible(false)
                    }}
                    onClose={() => {
                        setVisible(false)
                    }}
                    bodyStyle={{ height: '80vh' }}
                >
                    <div className='comment-detail' dangerouslySetInnerHTML={{ __html: mockContent === null ? mockContent : mockContent.replace(/src="/g, 'src="http://124.93.196.45:10001/') }}></div>
                </Popup>
                <div className='comment-input'>
                    <Input className='input-comment'
                        placeholder='请输入内容'
                        value={inputComment}
                        onChange={val => {
                            setInputComment(val)
                        }}
                    />
                    <button className='comment-input-btn' onClick={sendComment}>发布</button>
                </div>
            </div>
        </div>
    )
}
